let data = [{
        "count": 4000,
        "price": 1200,
        "unitPrice": "0.3000"
    },
    {
        "count": 8000,
        "price": 2000,
        "unitPrice": "0.2500"
    },
    {
        "count": 40000,
        "price": 8000,
        "unitPrice": "0.2000"
    }
]
// 获取btn-list容器
let btnList = document.querySelector(".btn-list")
data.forEach(function (v, i) {
    btnList.innerHTML += `<li class="fl btn">${v.count}次<li>`
})
// 渲染之后获取按钮
let btnArr = document.querySelectorAll(".btn")

// 初始化
btnArr[1].classList.add("act")
// 获取price标签
let price = document.querySelector(".price")
// 遍历添加事件
btnArr.forEach(function (v, i) {
    v.onclick = function () {
        // 一刀切
        btnArr.forEach(function (v2, i2) {
            v2.classList.remove("act")
        })
        // 当前按钮添加act
        v.classList.add("act")
        price.innerHTML = `￥${data[i].price}<span>(约${data[i].unitPrice}元/次,）</span>`
    }
})
// 选项卡
let proBtn = document.querySelectorAll(".probtn  li")
console.log(proBtn, 1)
let box = document.querySelectorAll(".box-one .probox")
console.log(box)
proBtn.forEach(function (v, i) {


    v.onclick = function () {
        proBtn.forEach(function (v2, i2) {
            v2.className = "";
        })
        v.className = "active"
        box.forEach(function (v2, i2) {
            v2.style.display = "none"
        })
        box[i].style.display = "block"
    }

})